<style lang="less" scoped>
    .main {
        position: absolute;
        top: 0.88rem;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid #ebebeb;
        .item {
            padding: 0.3rem 0.34rem 0;
            font-size: 0.22rem;
            color: #858585;
            .avatar {
                margin: 0.05rem 0.36rem 0 0;
            }
            .bill_b {
                flex: 1;
                padding-bottom: 0.3rem;
                border-bottom: 1px solid #ebebeb;
            }
        }
        .bill_b {
            .bill_title {
                font-size: 0.28rem;
                color: #323232;
                line-height: 0.36rem;
                max-width: 3.68rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .bill_amount {
                flex: 1;
                text-align: right;
                margin-top: 0.08rem;
                font-size: 0.34rem;

                color: #323232;
                &.active {
                    color: #e94f4f;
                }
            }
            .bill_type {
                font-size: 0.26rem;
                color: #2c2c2c;
                margin: 0.2rem 0 0.24rem;
            }
            .bill_info {
                display: flex;
                justify-content: space-between;
                line-height: 0.26rem;
            }
        }
    }

    .noBusiness {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 0.36rem;
        color: #999999;
    }
</style>
<template>
    <div>
        <v-header title="我的账单">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div v-if="list.length <=0" class="main" :style="{top:interactive.statusBarHeight.height}">
            <div class="noBusiness">
                <div class="bill_null_icon" style="margin-bottom: 0.75rem"></div>
                <span>您还没有账单信息</span>
            </div>
        </div>
        <div v-else class="main" :style="{top:interactive.statusBarHeight.height}">
            <scroller ref="myscroller" :on-refresh="refresh" :on-infinite="loadMore?infinite:getDone">
                <router-link v-for="item in list" :to="{path:'/my/bill/billinfo',query:{billId:item.billId}}">
                    <div class="item">
                        <!--<div class="billB_icon avatar"></div>-->  <!--//等不到接口-->
                        <div class="bill_b">
                            <div class="bill_info" style="margin-top: 0.08rem;">
                                <span class="bill_title">{{item.describes}}</span>
                                <span class="bill_amount active">￥{{item.billAmount}}</span>
                            </div>
                            <p class="bill_type">[{{item.typeText}}]</p>
                            <div class="bill_info">
                                <span style="width: 60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">账单编号:{{item.billId}}</span>
                                <span>{{item.billTime}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <load-more v-show="!loadMore" :show-loading="false" tip="我是有底线的" background-color="#fbf9fe"></load-more>
            </scroller>
        </div>
    </div>
</template>
<script>

    import {mapActions, mapState} from 'vuex'
    import {LoadMore} from 'vux'
    import {getType} from './js/index'
    export default {
        components: {
            LoadMore
        },
        data() {
            return {
                title: "登录/注册",
                loadingImg: require("../../assets/img/avatar.png"),
                errorImg: require("../../assets/img/avatar.png"),
                list: [],
                pageNum: 1,
                pageSize: 15,
                loadMore: true
            };
        },
        activated() {
            this.pageNum = 1
            this.getQueryBillInfos();
        },
        methods: {
            getQueryBillInfos(callback, type) {
                this.$ajax.finance.queryBillInfos({pageNum: this.pageNum, pageSize: this.pageSize})
                    .then((res) => {
                        if (callback) {
                            callback();
                        }
                        if (type) {
                            let that = this;
                            res.body.content.list.forEach(function (v, i) {
                                v.typeText = getType(v.type);
                                that.list.push(v);
                            })
                        } else {
                            this.list=[];
                            let that = this;
                            res.body.content.list.forEach(v=>{
                                v.typeText = getType(v.type);
                            })
                            this.list = res.body.content.list;
                        }
                        // this.$refs.myscroller.resize()
                        if (res.body.content.list.length < this.pageSize) {
                            this.loadMore = false;
                            this.getDone();
                        } else {
                            this.loadMore = true
                        }
                        ;
                    })
            },
            refresh(done) {
                global.myLoad = true;
                this.pageNum = 1;
                this.getQueryBillInfos(done);
            },
            infinite(done) {
                global.myLoad = true;
                this.pageNum++;
                this.getQueryBillInfos(done, 'push');
            },
            getDone(done) {
                this.$refs.myscroller.finishInfinite(2);
            }
        },
        computed: mapState({user: state => state.user, interactive: state => state.interactive}),
    }
</script>